<%- include('header.html') -%>

<h1>掘金博客搜索</h1>
<form id="myForm">
  <input name="keyword" type="text" />
  <button type="submit">搜索</button>
</form>
<ul id="users">
  <% data.forEach(function(item){ %>
  <li>
    <% if (item.result_model.article_info) { %>
    <div class="article-card">
      <img class="article-cover" src="<%= item.result_model.article_info.cover_image %>" alt="<%= item.result_model.article_info.title %>" />
      <div class="article-content">
        <h2 class="title"><%= item.result_model.article_info.title %></h2>
        <div class="abstract"><%= item.result_model.article_info.brief_content %></div>
      </div>
    </div>
    <% } %>
  </li>
  <% }) %>
</ul>
<!-- <script type="module">
  import axios from '../node_modules/axios/dist/esm/axios.min.js'
  const form = document.getElementById('myForm')

  form.addEventListener('submit', async function (event) {
    event.preventDefault() // 阻止默认的表单提交行为

    // 在这里执行你的自定义逻辑
    // 例如，获取表单数据并进行处理
    const keywordInput = form.elements.keyword
    const keyword = keywordInput.value
    console.log('Submitted keyword:', keyword)

    // 可以通过 AJAX 或其他方式将数据发送到服务器
    // 这里只是一个简单的示例，将数据打印到控制台
    const res = await axios.get(`http://localhost:3000/search?keyword=${encodeURIComponent(keyword)}`)
    console.log('submit-res', res)
  })
</script> -->
<%- include('footer.html') -%>
